//
// angular-motion
// @version v0.3.2 - 2014-02-11
// @link https://github.com/mgcrea/angular-motion
// @author Olivier Louvignes <olivier@mg-crea.com>
// @license MIT License, http://www.opensource.org/licenses/MIT
//

// Fade
//

@fade-duration: .2s;
@fade-timing-function: ease;

.am-fade {

  animation-duration: @fade-duration;
  animation-timing-function: @fade-timing-function;
  animation-fill-mode: backwards;
  opacity: 1;

  &.am-fade-add, &.ng-hide-remove, &.ng-move  {
    animation-name: fadeIn;
  }
  &.am-fade-remove, &.ng-hide {
    animation-name: fadeOut;
  }

  &.ng-enter {
    visibility: hidden;
    animation-name: fadeIn;
    &.ng-enter-active {
      visibility: visible;
    }
  }
  &.ng-leave {
    animation-name: fadeOut;
  }

}


// Keyframes
//

@keyframes fadeIn {
  from {
    transform: scale(.98) translate3d(0, 0, 0);
    opacity: 0;
  }
  to {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: scale(.98) translate3d(0, 0, 0);
    opacity: 0;
  }
}

@keyframes fadeInWithoutScale {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOutWithoutScale {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeInWithoutScaleTooltip {
  from {
    opacity: 0;
  }
  to {
    opacity: .9;
  }
}

@keyframes fadeOutWithoutScaleTooltip {
  from {
    opacity: .9;
  }
  to {
    opacity: 0;
  }
}

// Bootstrap 3
//

.modal-backdrop,
.aside-backdrop {

  &.am-fade {

    background: rgba(0, 0, 0, .2);
    animation-duration: @fade-duration * 2;
    transform: none !important;
  }

  &.ng-enter {
    animation-name: fadeInWithoutScale;
  }

  &.ng-leave {
    animation-name: fadeOutWithoutScale;
  }
}

.tooltip,
.typeahead {

  &.ng-enter {
    animation-name: fadeInWithoutScaleTooltip;
  }

  &.ng-leave {
    animation-name: fadeOutWithoutScaleTooltip;
  }
}

.popover {

  &.ng-enter {
    animation-name: fadeInWithoutScaleTooltip;
  }

  &.ng-leave {
    animation-name: fadeOutWithoutScaleTooltip;
  }
}
